<template>
  <div class="tab-bar">
    <router-link to="/">
      <div class="tab-item" :class="{hlActive: isNormal}">
        <img :src="normalImgSrc">
        <div>工资计算器</div>
      </div>
    </router-link>
    <router-link to="/final">
      <div class="tab-item" :class="{hlActive: isFinal}">
        <img :src="finalImgSrc">
        <div>年终奖计算器</div>
      </div>
    </router-link>
  </div>
</template>

<script>
  export default {
    name: 'TabBar',
    props: {
      active: String
    },
    data() {
      return {
      }
    },
    computed: {
      isNormal: function () {
        return this.active === 'normal'
      },
      normalImgSrc: function () {
        return this.isNormal ? require('@/assets/month-HL.png') : require('@/assets/month.png')
      },
      isFinal: function () {
        return this.active === 'final'
      },
      finalImgSrc: function () {
        return this.isFinal ? require('@/assets/final-HL.png') : require('@/assets/final.png')
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .tab-bar {
    background-color: white;
    border-top: 1px solid #d4d4d4;
    height: 55px;
    display: flex;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    width: 100%;
  }

  .tab-bar .tab-item {
    padding-top: 7px;
    font-size: 16px;
    color: #cdcdcd;
    text-align: center;
  }

  .hlActive {
    color: black !important;
  }

  .tab-bar .tab-item img {
    width: 20px;
    height: 20px;
  }


</style>
